<style lang="scss">
	.col_info2{
        // text-align: right;
        text-align: left;
        padding-right: 20px;
        padding-bottom: 4px;
        padding-top: 4px;
    }
    .ivu-poptip-rel{
      width: 100%;
    }
    .ivu-table-wrapper-with-border{
      width: 100%;
    }
</style>
<template>
	<Table v-if="showDate" :columns="columnsList" :data="dataList" :border="showborder" :span-method="handleSpan" style="width: 100%;">
		<template slot-scope="{ row, index }" slot="clazz">
			<span>{{row.clazz.split(".").length > 1 ? row.clazz.split(".")[1]:row.clazz}}</span>
		</template>
		<template slot-scope="{ row, index }" slot="serviceName">
      <Checkbox v-if="(!ifedit && type == 'enty_resource') || editNumber" v-model="dataList[index].check" @on-change="test($event,index)">
      </Checkbox>
			<span>{{row.serviceName.split(".").length > 1 ? row.serviceName.split(".")[1]:row.serviceName}}</span>
			<Tooltip v-if="row.subName == null || row.subName == ''" :content="row.des ? row.des:'暂无信息'"
			 max-width="200" placement="right" :transfer="true" style="white-space: normal;">
				<Icon type="md-help-circle" />
			</Tooltip>
		</template>
		<template slot-scope="{ row, index }" slot="subName">
			<span>{{row.subName.split(".").length > 1 ? row.subName.split(".")[1]:row.subName}}</span>
			<Tooltip v-if="row.subName" :content="row.des ? row.des:'暂无信息'"
			 max-width="200" placement="right" :transfer="true" style="white-space: normal;">
				<Icon type="md-help-circle" />
			</Tooltip>
		</template>
		<template slot-scope="{ row, index }" slot="options">
			<!-- 默认 -->
			<Poptip :transfer="true" word-wrap width="400" style="width: 100%;" :content="row.des? row.des:'暂无信息'">
				<Row v-if="row.resourcetype == 0" style="width: 100%;">
					<Col span="12" class="col_info2">
					<span>*数量：</span>
					<template v-if="type == 'tool' && (ifedit || !isEditTool)">
            <span v-if="!isEditTool">{{row.quotaValue}}</span>
						<span v-else>{{row.val}}</span>
					</template>
					<template v-else-if="type != 'tool' && (ifedit)">
						<span v-if="ifedit || !isEditTool">{{row.val}}</span>
					</template>
					<InputNumber @on-focus="setcheck(row)" v-else :min="0" style="width: 50%; " class="table_input" v-model="dataList[index].val"
					 :readonly="ifedit" />
					</Col>
					<Col span="12" class="col_info2">
					<span>*单位：</span>
					<template v-if="ifedit || !isEditTool">
						<span v-if="isEditTool">{{row.quotaUnit}}</span>
						<span v-else>{{dataList[index].unit}}</span>
					</template>
					<Select @on-change="setcheck(row)" v-else v-model="dataList[index].unit" style="width: 60%;text-align: left; "
					 :transfer="true" :disabled="ifedit">
						<Option v-for="(item,index) in row.options" :key="index" :value="item">{{item}}</Option>
					</Select>
					</Col>
				</Row>

				<!-- 单选 -->
				<Row v-else-if="row.resourcetype == 1" style="width: 100%;">
					<Col span="24" class="col_info2" style="text-align: center;">
            <span v-if="!isEditTool">{{row.quotaValue}}</span>
            <span v-else>{{row.val}}</span>
            <RadioGroup @on-change="setcheck(row)" v-else v-model="dataList[index].val">
              <Radio v-for="(i, index) in row.options" :key="index" :label="i" :disabled="ifedit">{{i}}</Radio>
            </RadioGroup>
					</Col>
				</Row>
				<!-- 文本框 -->
				<Row v-else-if="row.resourcetype == 3" style="width: 100%;">
					<template v-for="(item, key) in row.options">
						<Col span="24" :key="key">
						<span>*{{item}}：</span>
						<span v-if="ifedit || !isEditTool">
              <span v-if="!isEditTool">{{row.quotaValue}}</span>
              <span v-else>{{row.val}}</span>
            </span>
						<Input @on-focus="setcheck(row)" :key="item" v-else type="textarea" :autosize="{minRows: 1,maxRows: 6}" style="width: 80%;text-align: left; "
						 class="table_input" v-model="dataList[index].val" :readonly="ifedit" />
						</Col>
					</template>
				</Row>
				<!-- 多选 -->
				<Row v-else-if="row.resourcetype == 4" style="width: 100%;">
					<Col span="24" style="text-align: center;">
					<CheckboxGroup v-model="!isEditTool ? row.quotaValue:row.val " v-if="ifedit || !isEditTool">
						<Checkbox v-for="(item,key1) in row.options" :key="key1" :label="item" :disabled="true">{{item}}</Checkbox>
					</CheckboxGroup>
					<CheckboxGroup @on-change="setcheck(row)" v-else v-model="dataList[index].val">
						<template v-for="(item,key2) in row.options">
							<Checkbox :label="item" :disabled="ifedit">{{item}}</Checkbox>
						</template>
					</CheckboxGroup>
					</Col>
				</Row>
				<!-- 双副本 -->
				<Row v-if="row.resourcetype == 5" style="width: 100%;">
					<Col span="12" class="col_info2">
					<span>*双副本数量：</span>
					<template v-if="ifedit || !isEditTool">
						<span v-if="!isEditTool">{{row.quotaValue}}</span>
						<span v-else>{{row.val}}</span>
					</template>
					<InputNumber v-else @on-focus="setcheck(row)" :min="0" style="width: 50%; " class="table_input" v-model="dataList[index].val"
					 :readonly="ifedit" />
					</Col>
					<Col span="11" class="col_info2">
					<span>*单位：</span>
					<template v-if="ifedit || !isEditTool">
            <span v-if="!isEditTool">{{row.quotaUnit}}</span>
            <span v-else>{{row.unit}}</span>
					</template>
					<Select v-else @on-change="setcheck(row)" v-model="dataList[index].unit" style="width: 60%;text-align: left; "
					 :transfer="true" :disabled="ifedit">
						<Option v-for="(item,index) in row.options" :key="index" :value="item">{{item}}</Option>
					</Select>
					</Col>
					<Col span="12" class="col_info2">
            <span v-if="!isEditTool">*单副本数量：{{row.quotaValue/2}}</span>
            <span v-else>*单副本数量：{{row.val/2}}</span>
					</Col>
				</Row>
				<!-- 三副本 -->
				<Row v-if="row.resourcetype == 6" style="width: 100%;">
					<Col span="12" class="col_info2">
					<span>*三副本数量：</span>
					<template v-if="ifedit || !isEditTool">
						<span v-if="!isEditTool">{{row.quotaValue}}</span>
						<span v-else>{{row.val}}</span>
					</template>
					<InputNumber v-else @on-focus="setcheck(row)" :min="0" style="width: 50%; " class="table_input" v-model="dataList[index].val"
					 :readonly="ifedit" />
					</Col>
					<Col span="11" class="col_info2">
					<span>*单位：</span>
					<template v-if="ifedit || !isEditTool">
						<span v-if="!isEditTool">{{row.quotaUnit}}</span>
						<span v-else>{{row.unit}}</span>
					</template>
					<Select v-else @on-change="setcheck(row)" v-model="dataList[index].unit" style="width: 60%;text-align: left; "
					 :transfer="true" :disabled="ifedit">
						<Option v-for="(item,index) in row.options" :key="index" :value="item">{{item}}</Option>
					</Select>
					</Col>
					<Col span="12" class="col_info2">
            <span v-if="!isEditTool">*单副本数量：{{parseFloat(row.quotaValue/3).toFixed(2)}}</span>
            <span v-else>*单副本数量：{{parseFloat(row.val/3).toFixed(2)}}</span>
					</Col>
				</Row>
			</Poptip>
		</template>
		<template slot-scope="{ row, index }" slot="reason">
			<p v-if="ifedit || !isEditTool">{{row.purpose}}</p>
			<Input v-else @on-focus="setcheck(row)" v-model="dataList[index].purpose" type="textarea" :autosize="{minRows: 1,maxRows: 6}"
			 value="b.ncdes" :readonly="ifedit" />
		</template>

		<template slot-scope="{ row, index }" slot="doneQuantity">
			<span v-if="row.resourcetype == 1 || row.resourcetype == 3 || row.resourcetype == 4">{{row.waitQuantity == 0 ? '已分配': '——'}}</span>
			<span v-else>{{parseFloat(row.doneQuantity).toFixed(2)}}</span>
		</template>
		<template slot-scope="{ row, index }" slot="doingQuantity">
			<span v-if="row.resourcetype == 1 || row.resourcetype == 3 || row.resourcetype == 4">——</span>
			<span v-else>{{parseFloat(row.doingQuantity).toFixed(2)}}</span>
		</template>
		<template slot-scope="{ row, index }" slot="waitQuantity">
			<span v-if="row.resourcetype == 1 || row.resourcetype == 3 || row.resourcetype == 4">{{row.waitQuantity == 0 ? '已分配': '未分配'}}</span>
			<span v-else>{{parseFloat(row.waitQuantity).toFixed(2)}}</span>
		</template>
		<template slot-scope="{ row, index }" slot="quantity">
			<span v-if="row.resourcetype == 1 || row.resourcetype == 3 || row.resourcetype == 4">{{row.waitQuantity == 0 ? '已分配': '未分配'}}</span>
			<InputNumber v-else :min="0" v-model="dataList[index].quantity" />
		</template>
    <template slot-scope="{ row, index }" slot="displayType">
    	<Select  v-model="dataList[index].displayType" multiple :transfer="true" >
    		<Option value="all">全部节段</Option>
        <Option value="only_in_check">评审阶段</Option>
        <Option value="only_in_allo">处理阶段</Option>
        <Option value="in_check_allo">评审和处理阶段</Option>
    	</Select>
    </template>
	</Table>
</template>
<script>
	export default {
		name: "tables",
		data() {
			return {
        showDate: false,
				sortData: [],
				g_span_record_obj: {
					"resource": {}
				},
				g_hash_record: {},
			}
		},
		created: function() {
      this.showDate = false
			console.log("---dataList-->", this.dataList)
			if (this.dataList.length > 0 && this.columnsList.length > 0) {
				this.dataList = this.setSortData(this.dataList)
        this.showDate = true
			}
		},
		methods: {
			test(bol,index){
				console.log("-----------",bol,this.dataList[index]);
        var row = this.dataList[index]
        this.dataList.forEach((item, index) => {
        	if (row.serviceName == item.serviceName) {
        		this.$set(this.dataList[index], 'check', bol)
        	}
        })
			},
			handleSpan({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
        if (column.slot === "clazz") {
        	return {
        		rowspan: row.mergeCol === 0 ? 0 : row.mergeCol,
        		colspan: row.mergeCol === 0 ? 0 : 1
        	};
        }else if (column.slot === "serviceName") {
        	// console.log(row,column,rowIndex, columnIndex)
        	return {
        		rowspan: row.mergeCol1 === 0 ? 0 : row.mergeCol1,
        		colspan: row.mergeCol1 === 0 ? 0 : 1
        	};
        }else if (column.slot === "subName") {
        	// console.log(row,column,rowIndex, columnIndex)
        	return {
        		rowspan: row.mergeCol2 === 0 ? 0 : row.mergeCol2,
        		colspan: row.mergeCol2 === 0 ? 0 : 1
        	};
        }
			},
			setSortData(data) {
				var t = JSON.stringify(data)
				var t2 = JSON.parse(t)
        console.log("t2 = ", JSON.stringify(t2))
				var res = t2.sort((a, b) => {
					let i = a['clazz'].localeCompare(b['clazz'])
					if (i == 0) {
						let i2 = a['serviceName'].localeCompare(b['serviceName'])
						if (i2 == 0) {
							return a['subName'].localeCompare(b['subName'])
						}else {
							return i2
						}
					} else {
						return i
					}
				})
				if (res.length > 0) {
					let that = this;
					let arrId = [];
					let serviceNameArr = [];
					let subNameArr = [];
					res.forEach(i => {
						!arrId.includes(i.clazz) ? arrId.push(i.clazz) : arrId;
						!serviceNameArr.includes(i.serviceName) ? serviceNameArr.push(i.serviceName) : arrId;
						!subNameArr.includes(i.subName) ? subNameArr.push(i.subName) : arrId;
					});
					let arrObj = [];
					let serviceNameObj = [];
					let subNameObj = [];
					arrId.forEach(j => {
						arrObj.push({
							id: j,
							num: 0
						})
					})
					serviceNameArr.forEach(j => {
						serviceNameObj.push({
							id: j,
							num: 0
						})
					})
					subNameArr.forEach(j => {
						subNameObj.push({
							id: j,
							num: 0
						})
					})
					console.log("arrId----->", arrId, arrObj)
					res.forEach(k => {
						arrObj.forEach(l => {
							k.clazz === l.id ? l.num++ : l.num;
						})
						serviceNameObj.forEach(l => {
							k.serviceName === l.id ? l.num++ : l.num;
						})
						subNameObj.forEach(l => {
							k.subName === l.id ? l.num++ : l.num;
						})
					})
					res.forEach(m => {
						arrObj.forEach((n, index) => {
							if (m.clazz === n.id) {
								if (arrId.includes(m.clazz)) {
									m.mergeCol = n.num;
									arrId.splice(arrId.indexOf(m.clazz), 1);
								} else {
									m.mergeCol = 0;
								}
							}
						})
						serviceNameObj.forEach((n, index) => {
							if (m.serviceName === n.id) {
								if (serviceNameArr.includes(m.serviceName)) {
									m.mergeCol1 = n.num;
									serviceNameArr.splice(serviceNameArr.indexOf(m.serviceName), 1);
								} else {
									m.mergeCol1 = 0;
								}
							}
						})
						subNameObj.forEach((n, index) => {
							if (m.subName === n.id) {
								if (subNameArr.includes(m.subName)) {
									m.mergeCol2 = n.num;
									subNameArr.splice(subNameArr.indexOf(m.subName), 1);
								} else {
									m.mergeCol2 = 0;
								}
							}
						})
					})
				}

				return res;
			},

			getSortName(nameStr) {
				var baseNum = 10000;
				var sp = nameStr.split(".");
				var res = 0
				if (sp.length > 1) {
					res = Number(sp[0]);
				} else {
					if (this.objContain(this.g_hash_record, nameStr)) {
						res = this.g_hash_record[nameStr];
					} else {
						var rand = this.randomNum(1000, 2000);
						this.g_hash_record[nameStr] = rand;
						res = rand;
					}

				}
				// console.log(res,nameStr)
				return res;

			},

			getRealName(nameStr) {

				var sp = nameStr.split(".");
				if (sp.length > 1) {
					return sp[1];
				} else {
					return nameStr;

				}

			},

			setUpandDown(obj, key, inp) {
				if (!this.objContain(obj, key)) {
					obj[key] = {
						"up": inp,
						"down": inp
					}
				}
				if (obj[key]["up"] < inp) {
					obj[key]["up"] = inp
				}
				if (obj[key]["down"] > inp) {
					obj[key]["down"] = inp
				}
			},

			objContain(obj, key) {
				// console.log(obj,key)
				for (var k in obj) {
					if (key == k) {
						return true
					}
				}
				return false;
			},

			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						//或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
						break;
					default:
						return 0;
						break;
				}
			},

			setcheck(row) {
				this.dataList.some((item, index) => {
					if (row.serviceName == item.serviceName) {
						this.$set(this.dataList[index], 'check', true)
					}
				})
			}
		},

		mounted: function() {},
		computed: {
			dataList: {
				get: function() {
					return this.value;
				},
				set: function(value) {
					this.$emit('input', value);
				}
			},
		},
		props: {
      showborder:{
        default: true
      },
			handleInfo: {
				default: false
			},
			type: {
				default: "resource"
			},
			isEditTool: {
				default: true
			},
			value: {},
			ifedit: {
				default: false
			},
			editNumber: {
				default: false
			},
			columnsList: {}
		},
		watch: {
		}
	}
</script>
